<template>
	<view class="comp">
		<view class="comp-info" v-if="setting.companyInfo">
			<text class="title">企业简介</text>
			<view class="jianjie">
				<text :user-select="true">
					<text v-for="(txt, i) in companyInfos" :key="i">
						{{ txt }}
						<text style="font-weight: bold;" v-if="i + 1 !== companyInfos.length">{{ setting.companyName }}</text>
					</text>
				</text>
			</view>
		</view>
		<template v-for="res in setting.reses" :key="res.id">
			<view class="comp-img">
				<text class="title" v-if="res.title">{{res.title}}</text>
				<image v-if="res.res" mode="widthFix" :src="`${previewBaseUrl}/${res.res}`"></image>
			</view>
		</template>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	import { baseUrl } from '../request/index.js'

	// props
	const props = defineProps({
		setting: { prop: Object, default: {} }, // 当前配置项
	})

	// data
	const companyInfos = computed(() => {
		const companyInfo = props.setting.companyInfo || ''
		return companyInfo.split(props.setting.companyName)
	})
	const previewBaseUrl = computed(() => {
		let url = baseUrl()
		if (process.env.NODE_ENV !== 'development') {
			url += '/$sys'
		}
		return url + '/api/file/preview'
	})
</script>

<style lang="scss" scoped>
	.comp {
		display: flex;
		flex-direction: column;
		margin: 0 40rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		color: #515151;
		font-size: 25rpx;
		line-height: 45rpx;

		&>.comp-info {
			padding: 40rpx;
		}

		&>.comp-img {
			box-sizing: border-box;
			width: 100%;

			&>.title {
				margin: 0 40rpx;
			}

			&>image {
				box-sizing: border-box;
				width: 100%;
			}
		}
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		margin: 20rpx 0;
	}
</style>